<template>
  <div id="user-management">
    <Tabs type="card">
      <TabPane label="用户管理"
               icon="md-settings">
        <div>
          <Form :model="form"
                label-position="left"
                :label-width="60">
            <Row>
              <Col span="6">
              <FormItem label="用户名称"
                        style="width:150px"
                        class="inputcommon">
                <Input v-model="form.loginName"
                       clearable></Input>
              </FormItem>
              </Col>
              <Col span="6">
              <FormItem label="所属角色"
                        class="inputcommon">
                <Select v-model="form.roleId"
                        clearable
                        style="width:150px"
                        @on-change="roleChange">
                  <Option v-for="item in options"
                          :value="item.value"
                          :key="item.value">{{ item.label }}</Option>
                </Select>
              </FormItem>
              </Col>
              <Col span="6">
              <FormItem v-if="form.roleId=='3'"
                        label="所属班级"
                        class="inputcommon">
                <Input v-model="form.classes"
                       clearable></Input>
              </FormItem>
              </Col>
              <Col span="6">
              <FormItem class="btn-wrap">
                <Button type="primary"
                        @click="getUsersList">查询</Button>
                <Button type="primary"
                        @click="addOrUpdateHandle()">添加</Button>
              </FormItem>
              </Col>
            </Row>
          </Form>
          <Table :loading="dataListLoading"
                 border
                 :columns="columns"
                 :data="data"></Table>
          <div class="page">
            <Page @on-change="currentChangeHandle"
                  :total="totalPage"
                  :page-size="pageSize" />
          </div>
        </div>
      </TabPane>
    </Tabs>
    <add-or-update v-if="addOrUpdateVisible"
                   ref="addOrUpdate"
                   @refreshDataList="getUsersList"></add-or-update>
    <Modal
        v-model="ifShowRowDetail"
        title="详情"
        >
        <div class="detail-photo">
          <div class="detail-photo-img"><img :src="photo"></div>
          <ul>
            <li>
              <h3>昵称：</h3>
              <h4>{{rowObj.roleName}}</h4>
            </li>
            <li>
              <h3>姓名：</h3>
              <h4>{{rowObj.name}}</h4>
            </li>
            <li>
              <h3>学号：</h3>
              <h4>{{rowObj.no}}</h4>
            </li>
          </ul>
        </div>
        <ul class="detail-ul">
          <li>
            <h3>学历：</h3>
            <h4>{{rowObj.education}}</h4>
          </li>
          <li>
            <h3>专业：</h3>
            <h4>{{rowObj.major}}</h4>
          </li>
          <li>
            <h3>单位：</h3>
            <h4>{{rowObj.unit}}</h4>
          </li>
          <li>
            <h3>籍贯：</h3>
            <h4>{{rowObj.nativePlace}}</h4>
          </li>
          <li>
            <h3>手机号：</h3>
            <h4>{{rowObj.mobile}}</h4>
          </li>
          <li>
            <h3>固定电话：</h3>
            <h4>{{rowObj.telephone}}</h4>
          </li>
          <li>
            <h3>邮箱：</h3>
            <h4>{{rowObj.email}}</h4>
          </li>
          <!--<li>
            <h3>职级：</h3>
            <h4>{{rowObj.rank}}</h4>
          </li>-->
          <li style="width: 100%;">
            <h3>介绍：</h3>
            <h4>{{rowObj.introduce}}</h4>
          </li>
          <div style="clear:both;"></div>
        </ul>
    </Modal>
  </div>
</template>
<script>
import AddOrUpdate from './user-management-add-update'
import { getUsersList, removeUser } from '@/api/management.js'
export default {
  data () {
    return {
      form: {
        loginName: '',
        roleId: 0,
        no: ''
      },
      columns: [
        {
          title: '用户名',
          key: 'loginName',
          render: (h, params) => {
            return h('div', [
              h('Icon', {
                props: {
                  type: 'person'
                }
              }),
              h('strong', params.row.loginName)
            ])
          }
        },
        {
          title: '真实姓名',
          key: 'name',
          render: (h, params) => {
            return h('div', [
              h('Icon', {
                props: {
                  type: 'person'
                }
              }),
              h('strong', params.row.name)
            ])
          }
        },
        {
          title: '所属角色',
          key: 'roleName'
        },
        {
          title: '所属班级',
          key: 'no'
        },
        {
          title: '操作',
          key: 'action',
          width: 180,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h(
                'Button',
                {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.showRowDetail(params.row)
                    }
                  }
                },
                '详情'
              ),
              h(
                'Button',
                {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.addOrUpdateHandle(params.row)
                    }
                  }
                },
                '修改'
              ),
              h(
                'Button',
                {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.remove(params.row.id)
                    }
                  }
                },
                '删除'
              )
            ])
          }
        }
      ],
      data: [
        {
          loginName: '管理',
          roleId: 1,
          roleName: '管理',
          password: '123',
          no: ''
        },
        {
          loginName: '张三',
          roleId: 2,
          roleName: '老师',
          password: '123',
          no: ''
        },
        {
          loginName: '李四',
          roleId: 4,
          roleName: '专家',
          password: '123',
          no: ''
        },
        {
          loginName: '王二',
          roleId: 3,
          roleName: '学生',
          password: '123',
          no: '三年二班'
        },
        {
          loginName: '狗蛋',
          roleId: 3,
          roleName: '学生',
          password: '123',
          name: '狗蛋',
          mobile: '13588889999',
          email: 'qq@qq.com',
          no: '三年三班'
        }
      ],
      options: [
        {
          value: 1,
          label: '管理员'
        },
        {
          value: 2,
          label: '教师'
        },
        {
          value: 4,
          label: '专家'
        },
        {
          value: 3,
          label: '学生'
        }
      ],
      addOrUpdateVisible: false,
      pageIndex: 1,
      pageSize: 5,
      totalPage: 0,
      dataListLoading: false,
      ifShowRowDetail: false,
      rowObj: {},
      photo: ''
    }
  },
  mounted () {
    this.getUsersList()
  },
  methods: {
    // 删除
    remove (id) {
      this.$Modal.confirm({
        title: '提示',
        content: '<p>是否对该用户进行删除操作</p>',
        loading: true,
        onOk: () => {
          removeUser(id).then(res => {
            if (res.data == 'success') {
              this.$Modal.remove()
              this.$Message.info('用户删除成功')
              this.getUsersList()
            }
          })
        }
      })
    },
    //查看行详情
    showRowDetail(row){
      this.ifShowRowDetail = true
      this.rowObj = row
      this.photo = process.env.API_ROOT.replace('wisdom-classroom/', '') +
        'images/photo/' + row.photo
      console.log(row)
    },
    // 新增 / 修改
    addOrUpdateHandle (row) {
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(row)
      })
    },
    // 获取表格数据
    getUsersList () {
      const date = []
      // this.form.time.map(item => {
      //   if (item != '') {
      //     date.push(dateFormat(item))
      //   }
      // })
      this.dataListLoading = true
      const params = {
        // userId: this.userId,
        pageNum: this.pageIndex,
        pageSize: this.pageSize,
        loginName: this.form.loginName,
        roleId: this.form.roleId,
        no: this.form.no
      }
      getUsersList(params).then(({ data }) => {
        if (data.rows.length > 0) {
          this.data = data.rows
          this.totalPage = data.total
        } else {
          this.data = []
          this.totalPage = 0
        }
        this.dataListLoading = false
      })
    },
    // 当前页
    currentChangeHandle (val) {
      this.pageIndex = val
      this.getUsersList()
    },
    roleChange (value) {
      if (!value) {
        this.form.roleId = 0
      }
    }
  },
  watch: {},
  components: {
    AddOrUpdate
  }
}
</script>
<style lang="scss">
#user-management {
  width: 100%;
  height: 100%;
  .ivu-row {
    height: 60px;
  }
  .inputcommon {
    .ivu-input-wrapper {
      width: 150px;
    }
  }
  .page {
    text-align: center;
    padding-top: 40px;
  }
  .btn-wrap {
    text-align: right;
  }
  
}
.detail-ul{
  font-size: 12px;
  li{
    float: left;
    width: 50%;
    display: flex;
    margin-bottom: 20px;
    h3{
      width: 80px;
      line-height: 20px;
      text-align: right;
    }
    h4{
      line-height: 20px;
    }
  }
}
.detail-photo{
  display: flex;
  .detail-photo-img{
    width: 50%;
    text-align: center;
  }
  img{
    width: 80px;
    height: 80px;
    border-radius: 100%;
  }
  li{
    display: flex;
    margin-bottom: 20px;
    h3{
      width: 80px;
      line-height: 20px;
      text-align: right;
    }
    h4{
      line-height: 20px;
    }
  }
}
</style>
